<template>
    <div class="login">

        <div class="login-all">

            <div class="login-header">
                <h3>登录进入房间</h3>
            </div>
            <div class="login-form">
                <el-form label-position="right" label-width="auto" :model="loginForm" style="max-width: 600px">
                    <el-form-item label="用户名" label-position="right">
                        <el-input v-model="loginForm.username" />
                    </el-form-item>
                    <el-form-item label="密码" label-position="right">
                        <el-input v-model="loginForm.password" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="submit">
                <el-button @click="loginSubmit">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import loginApi from "../api/login.js";
import { useRouter } from "vue-router";
import { reactive, ref } from 'vue';
import { useUserStore } from "../stores/user.js";

const router = useRouter();
const userStore = useUserStore();
console.log(userStore.state);

const loginForm = reactive({
    username: '',
    password: '',
})

const loginSubmit = async () => {
    const data = await loginApi.getToken(loginForm);
    if (data.code === 0) {
        userStore.state.token = data.data.account_token;
        router.push("/");
        return
    }
}
</script>

<style lang="less" scoped>
.login {
    height: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-form {
    display: flex;
    justify-content: center;
    align-items: center;
}

.submit{
    display: flex;
    justify-content: center;
    align-items: center;

}
</style>